import React, { useEffect, useState } from 'react'
import { Input } from 'antd-mobile'
import './Message.css'
function Messages() {

  const [messages, setMessages] = useState(['123'])

  const [input, setInput] = useState('')

  useEffect(() => {
    setMessages([...messages, input])
    setValue('')
  }, [])
  const [value, setValue] = useState('')
  return (
    <div>

      <div className='messages'>
        {
          messages.map((item, index) => {
            return <div key={index}>{item}:张三 </div>
          })
        }

        <div>{input}</div>
      </div>

      <div>
        <Input
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        <button onClick={() => setInput(value)}>发送</button>
      </div>

    </div>
  )
}

export default Messages
